<template>
  <div class="branch-plan">
    <search
      :isEdit="isEdit"
      :canEdit="canEdit"
      :isCurrentYear="isCurrentYear"
      @cancel="handleCancel"
      @save="handleSave"
      @set="handleSet">
      <div style="display: flex">
        <SearchInput searchText="Year">
          <a-select
            v-model:value="currentYear"
            show-search
            option-filter-prop="label"
            option-label-prop="label"
            :get-popup-container="triggerNode => triggerNode.parentNode"
            @change="handleYearChange">
            <a-select-option v-for="item in yearArr" :key="item" :label="item">
              {{ item }}
            </a-select-option>
          </a-select>
        </SearchInput>
        <SearchInput searchText="Branch">
          <a-select
            v-model:value="branch"
            show-search
            option-filter-prop="label"
            option-label-prop="label"
            :get-popup-container="triggerNode => triggerNode.parentNode"
            @change="handleBranchChange">
            <a-select-option v-for="item in branchList" :key="item.id" :label="item.name">{{
              item.name
            }}</a-select-option>
          </a-select>
        </SearchInput>
      </div>
    </search>
    <a-spin :spinning="loading" tip="Loading...">
      <e-container style="margin-top: 24px">
        <e-title title="Sales Plan" />
        <h1>{{ addComma(String(revenueAmount)) }} RMB</h1>
        <div class="line"></div>
        <div style="display: flex; flex-wrap: wrap; margin-top: 6px; margin-left: -80px">
          <input-area
            v-for="item in data"
            :key="item.empID"
            :title="item.displayName"
            :item="item"
            isEdit
            @add="addMonthly">
            <e-input-number v-model:inputValue="item.revenueAmount" :isEdit="!isEdit" />
          </input-area>
        </div>
      </e-container>
    </a-spin>

    <a-modal
      v-model:visible="visible"
      title="Monthly Sales Set"
      wrap-class-name="primary-modal"
      width="888px"
      @cancel="handleModalCancel">
      <div class="person">
        <e-icon type="SalesPersonnel" color="#818d9f" font-size="22px" />
        <span class="name">{{ currentAdd.displayName }}</span>
      </div>
      <div style="width: 100%; display: flex; justify-content: space-between; flex-wrap: wrap">
        <div v-for="(item, index) in addMonthlyData" :key="index" class="input-item">
          <div class="input-text">
            <span>{{ item.monthName }}</span>
          </div>
          <e-input-number v-model:inputValue="item.revenueAmount" />
        </div>
      </div>
      <template #footer>
        <a-button key="back" @click="handleModalCancel">Cancel</a-button>
        <a-button key="submit" type="primary" @click="handleModalSave">Save</a-button>
      </template>
    </a-modal>
  </div>
</template>

<script setup>
import { ref, onMounted, inject, computed } from 'vue'
import { useStore } from 'vuex'
import sp from '@/api/salesPlan.js'
import { addComma } from '@/utils/h_utils'
import { SAVED_SUCCESSFULLY } from '@/constants/message.js'
import EContainer from '@/components/EContainer.vue'
import ETitle from '@/components/ETitle.vue'
import EInputNumber from '@/components/EInputNumber.vue'
import EIcon from '@/components/EIcon.vue'
import SearchInput from '../../components/SearchInput.vue'
import search from './components/search.vue'
import inputArea from './components/input.vue'
const store = useStore()
const { message } = inject('Feedback')
// 模态框是否显示
const visible = ref(false)
// Branch
const branch = ref()
const branchList = ref([])
// 是否编辑
const isEdit = ref(false)
// 数据
const data = ref([])
// 选择弹框数据
const currentAdd = ref({})
// 1-12月输入框内容
const addMonthlyData = ref([])
// 年份数组
const yearArr = ref([])
// 当前选中年
const currentYear = ref()
const revenueAmount = ref(0)
const loading = ref(false)
// 允许编辑 分公司销售经理
const canEdit = computed(() => store.getters['user/isBranchCSO'])
const isCurrentYear = ref(true)
/**
 * 获取年份
 */
const getYear = () => {
  sp.getYears()
    .then(res => {
      if (res.code === 2000) {
        yearArr.value = res.data
        currentYear.value = yearArr.value[0]
      }
    })
    .then(() => {
      getBranch()
    })
}
/**
 * 获取Branch
 */
const getBranch = () => {
  sp.getBranch()
    .then(res => {
      if (res.code === 2000) {
        branchList.value = res.data
        branch.value = branchList.value[0].id
      }
    })
    .then(() => {
      getBranchSalesPlan()
    })
}
/**
 * 修改年份
 */
const handleYearChange = val => {
  currentYear.value = val
  isEdit.value = false
  const cYear = new Date().getFullYear()
  isCurrentYear.value = val === cYear
  getBranchSalesPlan()
}
/**
 * 修改Branch
 * @param val
 */
const handleBranchChange = val => {
  branch.value = val
  isEdit.value = false
  getBranchSalesPlan()
}
/**
 * 设置
 */
const handleSet = () => {
  isEdit.value = true
}
/**
 * 保存
 */
const handleSave = () => {
  const arr = []
  for (let i = 0; i < data.value.length; i++) {
    const obj = {}
    obj.branchID = data.value[i].branchID
    obj.dateYear = data.value[i].dateYear
    obj.empID = data.value[i].empID
    obj.currencyID = data.value[i].currencyID
    obj.revenueAmount = Number(data.value[i].revenueAmount)
    arr.push(obj)
  }
  sp.setBranchSalesPlanEmp(arr).then(res => {
    if (res.code === 2000) {
      message.success(SAVED_SUCCESSFULLY)
      isEdit.value = false
    }
  })
}
/**
 * 取消
 */
const handleCancel = () => {
  isEdit.value = false
  getBranchSalesPlan()
}
/**
 * 获取分部年度销售计划
 */
const getBranchSalesPlan = () => {
  loading.value = true
  sp.getBranchSalesPlan({
    year: currentYear.value,
    branch: branch.value
  })
    .then(res => {
      if (res.code === 2000) {
        revenueAmount.value = res.data.revenueAmount
        data.value = res.data.branchSalesPlanEmp
      }
    })
    .finally(() => {
      setTimeout(() => {
        loading.value = false
      }, 30)
    })
}
/**
 * 新增Monthly
 * @param val
 */
const addMonthly = val => {
  visible.value = true
  currentAdd.value = val
  addMonthlyData.value = val.monthly
}
/**
 * 取消模态框
 */
const handleModalCancel = () => {
  visible.value = false
}
/**
 * 保存模态框
 */
const handleModalSave = () => {
  const arr = []
  for (let i = 0; i < addMonthlyData.value.length; i++) {
    const obj = {}
    obj.branchID = addMonthlyData.value[i].branchID
    obj.dateYear = addMonthlyData.value[i].dateYear
    obj.dateMonth = addMonthlyData.value[i].dateMonth
    obj.empID = addMonthlyData.value[i].empID
    obj.currencyID = addMonthlyData.value[i].currencyID
    obj.revenueAmount = Number(addMonthlyData.value[i].revenueAmount)
    arr.push(obj)
  }
  sp.setMonthlySalesPlanEmp(arr).then(res => {
    if (res.code === 2000) {
      visible.value = false
      message.success(SAVED_SUCCESSFULLY)
    }
  })
}
/**
 * 初始化
 */
onMounted(() => {
  getYear()
})
</script>

<style lang="less" scoped>
@import '@/assets/style/reset_form';

.branch-plan {
  h1 {
    font-weight: 700;
    color: @text-black;
    font-size: 24px;
    margin-top: 30px;
    padding-left: 12px;
  }
  .line {
    width: 100%;
    height: 1px;
    border-top: 1px dashed @border-color;
    margin-top: 30px;
  }
  :deep(.ant-input) {
    width: 15vw;
    text-align: right;
  }
}
.primary-modal {
  .person {
    margin-bottom: 16px;
  }
  .name {
    font-weight: 700;
    color: @deep-gray;
    font-size: 16px;
    margin-left: 8px;
  }
  .input-item {
    margin-bottom: 16px;
    .input-text {
      color: @deep-gray;
      font-size: 14px;
      margin-bottom: 6px;
    }
    :deep(.ant-input-number),
    :deep(.ant-input-number-input),
    :deep(.ant-input-number-disabled) {
      color: @text-black;
      text-align: right;
      width: 15vw;
    }
  }
}
</style>
<route lang="yaml">
name: Branch Plan
path: '/sales-settings/branch-plan'
meta:
  title: Branch Plan
  sort: 1
  roles: NO
</route>
